<template>
  <div class="Publish">
    <div class="nav">
      <text class="fabu"> 发布</text>
    </div>
    <div class="con">
      <!-- 自定义右侧内容 -->
      <uni-list-chat
        @click.once="navTab(item.id)"
        v-for="(item, index) in objs"
        :key="index"
        :title="item.title"
        :note="item.desc"
        :clickable="true"
        avatarCircle
      >
        <image class="imgs" :src="item.img" mode="scaleToFill" />
        <view class="chat-custom-right">
          <!-- 需要使用 uni-icons 请自行引入 -->
          <uni-icons
            type="forward"
            color="#999"
            size="20"
            class="icon"
          ></uni-icons>
        </view>
      </uni-list-chat>

      <div class="fei"></div>
      <uni-list-chat
        title="买新房 职业顾问帮您忙"
        note="提交购房意向买房顾问全程带看"
        avatarCircle
        badge-positon="left"
        :clickable="true"
        @click="maifang"
      >
        <image
          class="imgs"
          src="http://10.31.71.52:7002/public/static/pubImage/publish_10.jpg"
          mode="scaleToFill"
        />
        <view class="chat-custom-right">
          <!-- 需要使用 uni-icons 请自行引入 -->
          <uni-icons
            type="forward"
            color="#999"
            size="20"
            class="icon"
          ></uni-icons>
        </view>
      </uni-list-chat>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";

let objs = [
  {
    id: 1,
    img: "http://10.31.71.52:7002/public/static/pubImage/publish_03.jpg",
    title: "二手房出售",
    desc: "发布二手房出售信息",
  },
  {
    id: 2,
    img: "http://10.31.71.52:7002/public/static/pubImage/publish_06.jpg",
    title: "有房出租",
    desc: "发布房源出租信息",
  },
  {
    id: 3,
    img: "http://10.31.71.52:7002/public/static/pubImage/publish_08.jpg",
    title: "新房出售",
    desc: "发布新房出售信息",
  },
];

// 跳转路由
const navTab = (id) => {
  // console.log(id);
  if(id === 1){
      uni.navigateTo({
        url: "/subpkg/ershou/ershou",
        animationType: "pop-in",
        animationDuration: 200,
      });
      uni.setStorageSync('path','/subpkg/ershou/ershou')
  }else if(id === 2){
    uni.navigateTo({
        url: "/subpkg/youfang/youfang",
        animationType: "pop-in",
        animationDuration: 200,
      });
      uni.setStorageSync('path','/subpkg/youfang/youfang')

  }else if(id === 3){
    uni.navigateTo({
        url: "/subpkg/xinfang/xinfang",
        animationType: "pop-in",
        animationDuration: 200,
      });
      uni.setStorageSync('path','/subpkg/xinfang/xinfang')
  }
};

// 买新房
const maifang = () => {
   uni.navigateTo({url:"/subpkg/broker/broker"})
};
</script>

<style lang="scss">
.Publish {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .nav {
    width: 100vw;
    height: 100px;
    background: linear-gradient(to right, #3e85ef, rgb(46, 175, 255));
    display: flex;
    position: relative;
    .fabu {
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
  }
  .con {
    flex: 1;
    overflow: auto;
    background-color: #f4f4f4;
    uni-list-chat {
      position: relative;
    }
    .imgs {
      position: absolute;
      top: 10px;
      left: 12px;
      width: 50px;
      height: 50px;
    }
    .icon {
      position: relative;
      top: 8px;
    }
    .fei {
      width: 100vw;
      height: 50px;
      background-color: #fff;
    }
  }
}
</style>
